<template>
	<view class="mainPage" style="padding-top: 0rpx">
		<view class="cu-bar search" :style="{backgroundColor:barStyle.backColor,color:barStyle.textColor}">
			<view class="action">
				<text>{{ city }}</text>
			</view>
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input v-model="keyWords" type="text" placeholder="输入阿姨姓名" confirm-type="search" />
			</view>
		</view>
		<view class="list padding padding-top-xs padding-left-0">
			<view class="item bg-white radius-lg padding-sm margin-bottom-sm crow" v-for="(item,index) in showList" :key="index">
				<view class="left avatar margin-left-sm">
					<image :src="item.avatar" mode="" class="img"></image>
				</view>
				<view class="right">
					<view class="top crow space-between">
						<view class="left-box">
							<text class="padding-right-mn text-black text-bold">{{item.nickname}}</text>
							<text :class="item.isLove ? 'text-red cuIcon-likefill' : 'cuIcon-like'"></text>
						</view>
						<view class="status crow radius">
							<view class="zuizao">
								最早可约
							</view>
							<view class="time">
								今{{item.serviceTime}}
							</view>
						</view>
					</view>
					<view class="center text-sm text-gray crow space-between">
						<view class="left-box">
<!--							<text class="cuIcon-shop"></text>-->
<!--							<text class="padding-left-mn">{{item.store}}</text>-->
						</view>
						<view class="right-box crow">
							<u-icon name="map" size="24" color="gray"></u-icon>
							<span style="margin-left: 10rpx">{{item.juli}}</span>
						</view>
					</view>
					<view class="bottom text-gray text-sm crow space-between">
						<view class="crow">
							<view class="solid-right padding-right">
								<text class="cuIcon-form themeColor"></text>{{ item.orderGoods.length}}
							</view>
							<view class="solid-right padding-lr">
								<text class="cuIcon-friend themeColor"></text>{{ item.staffCollects.length}}
							</view>
							<view class="padding-left">
								<text class="cuIcon-message themeColor"></text>{{ item.staffComments.length}}
							</view>
						</view>
						<view class="right-box">
							<view class="liji" @click="toUrl('/pages/partner/detail?id=' + item.id)">
								<div class="cu-btn round sm bg-primary" style="color: #ffffff">立即预约</div>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<Loading v-if="pageLoading"/>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageLoading:false,
				barStyle:{
					backColor:'',
					textColor:'#ffffff'
				},
				current_page:1,
				list: [],
        city: '',
        keyWords: ''
			};
		},
		onShow() {
      this.getList()
		},
    computed: {
      showList() {
        return this.list.filter(item => item.nickname.includes(this.keyWords))
      }
    },
		methods:{
			getList(){
        let _this = this
        this.$http.getTechnicianList().then(res => {
          _this.list = res.map(item => {
            return {
              ...item,
              juli: '0km',
              serviceTime: item.order_time || '暂无',
            }
          })
          wx.getLocation({
            type: 'wgs84',
            success: (_res) => {
              console.log(_res, '定位')
              _this.list.forEach(item => {
                item.juli = _this.getDistance(_res.latitude, _res.longitude, item.latitude, item.longitude)
              })
            },
            fail: (err) => {
              console.log(err)
            }
          })
        })
			},

      Rad(d) { //根据经纬度判断距离
        return d * Math.PI / 180.0;
      },
      getDistance(lat1, lng1, lat2, lng2) {
        if (!lat1 || !lng1 || !lat2 || !lng2) {
          return '0m'
        }
        if (lat1 == lat2 && lng1 == lng2) {
          return "0m";
        }
        // lat1用户的纬度
        // lng1用户的经度
        // lat2阿姨的纬度
        // lng2阿姨的经度
        var radLat1 = this.Rad(lat1);
        var radLat2 = this.Rad(lat2);
        var a = radLat1 - radLat2;
        var b = this.Rad(lng1) - this.Rad(lng2);
        var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
        s = s * 6378.137;
        s = Math.round(s * 10000) / 10000;
        s = s.toFixed(2) + 'km' //保留两位小数
        console.log('经纬度计算的距离:' + s)
        return s
      },
		},
		onPageScroll(event){
		    let scrollTop = event.scrollTop
		    let color = Math.round(Math.round(scrollTop)/100)*255;
		    let alpha = Math.round(scrollTop)/100;

		    color= color>=255?255:color
		    alpha = alpha>=1?1:alpha

		    this.barStyle.textColor = `rgb(${255-color},${255-color},${255-color})`;
		    this.barStyle.backColor = `rgba(255,255,255,${alpha})`;
		}
	}
</script>
<style lang="less" scoped>
.search-form{
	// background-color: white;
}
.list{
	.item{
		height: 200upx;
		.avatar{
			position: relative;
			width: 170upx;
			height: 170upx;
			display: flex;
			align-items: center;
			.img{
				width: 130upx;
				height: 130upx;
				border-radius: 50%;
			}
			.title-img{
				width: 210upx;
				height: 175upx;
				position: absolute;
				left: -20rpx;
			}
		}
		.right{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 150upx;
			.top{
				.status{
					border: 2rpx solid #0ab27d;
					font-size: 20rpx;
					.zuizao{
						background-color: #0ab27d;
						padding: 5rpx;
						border-top-right-radius: 10rpx;
						border-bottom-right-radius: 10rpx;
						color: white;
					}
					.time{
						padding: 5rpx;
					}
				}
			}
		}
	}
}
.liji{
	button{
		background: var(--theme-bg-color);
		color: white;
	}
}
</style>
